<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css" />
</head>
<body>
<div id="header" class="wrap">
	<div id="logo">传习教育网上书城</div>
	<div style="width:380px; height:50px; float:right; position:absolute; left:60%; top:2px; line-height:50px">
	    <img src="${pageContext.request.contextPath}/images/cart.gif" style="margin-bottom:-4px" width="26" height="23">
		         <c:if test="${!empty user}">
                                                      欢迎您： ${user.username} &nbsp;
                 </c:if> 
                 <c:if test="${empty user}">
                  <a href="${pageContext.request.contextPath}/login.jsp">登录</a>
				  <a href="${pageContext.request.contextPath}/register.jsp">注册</a> 
                 </c:if>
		</div>
	<div id="navbar">
		<div class="userMenu">
			<ul>
				<li><a href="${pageContext.request.contextPath }/index.jsp">User首页</a></li>
				<li><a href="${pageContext.request.contextPath }/orderlist.jsp">我的订单</a></li>
				<li class="current"><a href="${pageContext.request.contextPath }/shopping.jsp">购物车</a></li>
				<li><a href="${pageContext.request.contextPath }/book/user?method=logout">注销</a></li>
			</ul>
		</div>
		<form method="post" name="search" action="${pageContext.request.contextPath}/book/product?method=search">
			搜索：<input class="input-text" type="text" name="keywords" />
			<input class="input-btn" type="submit" name="submit" value=""/>
		</form>
	</div>
</div>
<div id="content" class="wrap">
	<div class="list bookList">
		<form method="post" name="shoping" action="${pageContext.request.contextPath }/createOrder.jsp">
			<table>
				<tr class="title">
					<th class="view">图片预览</th>
					<th>书名</th>
					<th class="nums">数量</th>
					<th class="price">价格</th>
					<th>操作</th>
				</tr>
				<c:if test="${empty cart}">
				<tr>
				  <td colspan="5"> 
				    <h3>您的购物车空空如也...</h3>
				    <h4>您可以先去 <a href="${pageContext.request.contextPath }/index.jsp">购物</a></h4>
				  </td>
				</tr>
				</c:if>
				<c:if test="${!empty cart}">
				<c:set var="totalPrice" value="0" />
				<c:forEach items="${cart}" var="map">
				<tr>
					<td class="thumb"> <img src="${pageContext.request.contextPath}/${map.key.imgurl}" width="90" height="90" />
					</td> 
					<td class="title">${map.key.name}</td>
					<td>
					<input type="button" value=" - " onclick="changNum('${map.key.id}',${map.key.pnum},${map.value-1})" />
					<input class="input-text" type="text" readonly="readonly" id="pnum" name="nums" value="${map.value}" onblur="checkNum(${map.key.pnum},this.value)" />
					<input type="button" value=" + " onclick="changNum('${map.key.id}',${map.key.pnum},${map.value+1})" />
					</td>
					<td>￥<span>${map.key.price }</span></td>
					<td> 
					<a href="javascript:delconfirm('${map.key.id}')">删除</a> 
					</td>
				</tr>
				<c:set var="totalPrice" value="${totalPrice + map.value * map.key.price}" />
			   </c:forEach>
			   </c:if>
			</table>
			<div class="button">
				<h4>总价：￥<span>${totalPrice}</span>元</h4>
				<input class="input-chart" type="submit" name="submit" value="" />
			</div>
		</form>
	</div>
</div>
<div id="footer" class="wrap">
	传习教育网上书城 &copy; 版权所有
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
  function checkNum(kcnum,count){
	  if(count>=kcnum){
		  confirm("商品的购买数量不能大于库存数!");
		  //count=kcnum;
		  $("#pnum").val(kcnum);
	  }
  }
  function changNum(id,kcnum,count){
	  //当减到0的时候 要询问
	  if(count==0){
		  confirm("商品的数量最少是1件!");
		  count=1;
	  }
	  //当加到最大值的时候 要询问
	  if(count>=kcnum){
		  confirm("商品的库存数量不够!");
		  count=kcnum;
	  }
	  location.href='${pageContext.request.contextPath }/book/cart?method=changeCart&id='+id+'&'+'count='+count;
  }
  function delconfirm(id){
	 var falg = confirm("您确定要删除该商品吗?");
	 if(falg){
		 location.href='${pageContext.request.contextPath }/book/cart?method=delCart&id='+id;
	 }
  }
</script>
</body>
</html>